<template>
  <div class="devDistribution">
    <div class="title">
      <img src="@/assets/screenShowImg/标题组件背景.png" />
      <div>
        <img src="@/assets/screenShowImg/icons-标题.png" />
        <p>响应时间</p>
      </div>
    </div>
    <div class="devDistributionEcharts" id="devDistributionEcharts" ref="chartRef"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
const chartRef = ref<HTMLDivElement | null>(null);
onMounted(() => {
  if (chartRef.value) {
    const myChart = echarts.init(chartRef.value);

    const option: echarts.EChartsOption = {
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '响应时间',
          type: 'pie',
          radius: ['40%', '70%'],
          startAngle: 180,
          endAngle: 360,
          itemStyle: {
            borderRadius: 4,
            borderColor: '#fff',
            borderWidth: 1,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            show: true,
            formatter: '{b}: {d}%' // 使用 formatter 来格式化显示为百分比形式
          },
          data: [
            { value: 1048, name: '20秒以上' },
            { value: 735, name: '10~20秒' },
            { value: 580, name: '5~10秒' },
            { value: 484, name: '2~5秒' },
            { value: 300, name: '2秒下' }
          ],
        }
      ]
    }
    myChart.setOption(option);
  }
});
</script>


<style lang="scss" scoped>
.devDistribution {
  width: 100%;
  height: 31%;
  position: relative;
  display: flex;
  flex-direction: column;
  div.title {
    width: 100%;
    flex: 0 0 auto;
    position: relative;
    > img {
      width: 100%;
    }
    > div {
      position: absolute;
      top: 50%;
      left: 5%;
      transform: translateY(-50%);
      height: 100%;
      display: flex;
      align-items: center;
      > img {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
      > p:nth-of-type(1) {
        font-size: 18px;
        font-weight: 600;
        text-indent: 25px;
      }
    }
  }
  > div.devDistributionEcharts {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    overflow: auto;
    position: relative;
  }
}
</style>